<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab切换</title>
    <style>
      html,body {
          margin: 0;
          padding: 0;
      }
      ul,li {
        list-style: none;
      }
      .tab-menu {
          position: relative;
      }
      .tab-menu .active {
          background: #fff;
          border-bottom: none;
      }      
      .tab-menu li {
        width: 100px;
        float: left;
        text-align: center;
        border: 1px solid #666;
        background: #e5e5e5;
      }
      .tab-box {
        /*position: relative;
        top: 23px;
        left: 20px;*/
      }
      .tab-box div {
          position: relative;
          top: 28px;
          left: 40px;
          width: 300px;
          height: 100px;
          border: 1px solid #e5e5e5;
      }
      .hide {
          display: none;
      }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab-menu">
            <ul>
                <li class="active">时事</li>
                <li>体育</li>
                <li>娱乐</li>
            </ul>
        </div>
        <div class="tab-box">
            <div>时事</div>
            <div class="hide">体育</div>
            <div class="hide">文化</div>
        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            var $li = $(".tab-menu ul > li"),
                $div = $(".tab-box > div");
                // idx = $li.index(); 
                $li.click(function(){
                   var $cur = $(this),
                       idx = $cur.index();
                    $cur.addClass("active").siblings().removeClass("active");

                    $div.eq(idx).show().siblings().hide();

                })
        });
    </script>
</body>
</html>